
import { addon } from "pao-aop";
import { reactControl, ReactViewControl, ReactViewState } from "pao-aop-client";
import React from "react";
import { Button, Table, DatePicker, Modal, Form, Radio, LocaleProvider, Select } from "antd";
import { AppServiceUtility } from 'src/projects/app/appService';
import { MainContent } from "src/business/components/style-components/main-content";
import { MainCard } from "src/business/components/style-components/main-card";
const { MonthPicker } = DatePicker;
import moment from 'moment';
import { request } from "src/business/util_tool";
import { exprot_excel } from "src/business/util_tool";
import zh_CN from 'antd/lib/locale-provider/zh_CN';
const Option = Select.Option;
let columns: any = [
    {
        title: "社区",
        dataIndex: 'social_worker',
        key: 'social_worker',
        width: 100,
    },
    {
        title: '姓名',
        dataIndex: 'user_name',
        key: 'user_name',
        width: 100,
    },
    {
        title: '联系地址',
        dataIndex: 'user_address',
        key: 'user_address',
        width: 150,
    },
    {
        title: '类别',
        dataIndex: 'classification',
        key: 'classification',
        width: 150,
    },
    {
        title: '服务商',
        dataIndex: 'service_provider_name',
        key: 'service_provider_name',
        width: 100,
    },
    {
        title: '订单编号',
        dataIndex: 'order_code',
        key: 'order_code',
        width: 100,
    },
    {
        title: '服务开始时间',
        dataIndex: 'start_date',
        key: 'start_date',
        width: 100,
    },
    {
        title: '服务结束时间',
        dataIndex: 'end_date',
        key: 'end_date',
        width: 100,
    },
    {
        title: '服务项目',
        dataIndex: 'item_type_name',
        key: 'item_type_name',
        width: 100,
    },
    {
        title: '服务标准',
        dataIndex: 'item_name',
        key: 'item_name',
        width: 100,
    },
    {
        title: '价格(元)',
        dataIndex: 'price',
        key: 'price',
        width: 100,
    },
    {
        title: '购买类型',
        dataIndex: 'buy_type',
        key: 'buy_type',
        width: 100,
    }
];
/** 状态：服务记录结算组件数据 */
export interface serviceRecordSettlementViewState extends ReactViewState {
    /** 明细数据 */
    dataSource: any[];
    /** 日期条件 */
    query_month?: any;
    /** 控制弹框显示 */
    show?: any;
    /** 导出的条件 */
    select_type?: any;
    /** 服务商列表 */
    org_list: any[];
    /** 选择的服务商Id */
    org_id: string;
    /** 当前页 */
    current_page?: number;
    /** 每页数 */
    pageSize?: number;
    /** 总页数 */
    total_pages?: number;
    /** 数据总数 */
    total_data?: number;
    /** 社工局数组 */
    social_worker_list?: any[];
    /** 所选社工局 */
    social_worker_id?: string;

}
/** 组件：服务记录结算组件视图 */
export class serviceRecordSettlementView extends React.Component<serviceRecordSettlementViewControl, serviceRecordSettlementViewState> {
    constructor(props: serviceRecordSettlementViewControl) {
        super(props);
        this.state = {
            dataSource: [],
            select_type: 1,
            show: false,
            query_month: moment().format('YYYY/MM'),
            org_list: [],
            org_id: '',
            social_worker_list: [],
            social_worker_id: '',
            current_page: 1,
            pageSize: 10
        };
    }
    // 导出类型选择
    onChangeRadio(value: any) {
        // 全部
        if (value === 1) {
            this.setState({
                select_type: value
            });
        }
        // 筛选记录进行导出
        if (value === 0) {
            this.setState({
                select_type: value
            });
        }
    }
    /** 导出按钮 */
    export = () => {
        this.setState({ show: true });
    }
    // 下载
    download() {
        // 判断导出选择的条件
        const { select_type } = this.state;
        // let export_data: any = [];
        // 全部
        if (select_type === 1) {
            let condition = { 'month': this.state.query_month };
            if (this.state.org_id) {
                condition['org_id'] = this.state.org_id;
            }
            request(this, AppServiceUtility.report_management.get_service_provider_record_settlement!(condition))!
                .then((data: any) => {
                    if (data['result']) {
                        let new_data: any = [];
                        data['result'].map((item: any) => {
                            new_data.push({
                                "社区": item.social_worker,
                                "姓名": item.user_name ? item.user_name : '',
                                "联系地址": item.user_address,
                                "类别": item.classification,
                                "服务商": item.service_provider_name,
                                "订单编号": item.order_code,
                                "服务开始时间": item.start_date,
                                "服务结束时间": item.end_date,
                                "服务项目": item.item_type_name,
                                "服务标准": item.item_name,
                                "价格(元)": item.price,
                                "购买类型": item.buy_type,
                            });
                        });
                        exprot_excel([{ name: '服务记录结算', value: new_data }], '服务记录结算', 'xls');
                    }
                });
        }
        this.setState({ 'show': false });
    }
    // 显示/取消弹窗
    onCancel(data: any) {
        this.setState(data);
    }
    componentWillMount() {
        (async () => {
            // 查询社工局列表
            await request(this, AppServiceUtility.person_org_manage_service.get_all_organization_list!({ 'personnel_category': '街道' }))!
                .then((data: any) => {
                    this.setState({
                        social_worker_list: data!.result!,
                        social_worker_id: data!.result!.length > 0 ? data!.result![0]['id'] : ''
                    });
                })
                .catch(err => {
                    console.info(err);
                });
            // 查询服务商列表
            await request(this, AppServiceUtility.person_org_manage_service.get_organization_list!({ 'personnel_category': '服务商' }))!
                .then((data: any) => {
                    this.setState({
                        org_list: data!.result!,
                        org_id: data!.result!.length > 0 ? data!.result![0]['id'] : ''
                    });
                })
                .catch(err => {
                    console.info(err);
                });
            await this.select_func({ 'month': moment().format('YYYY/MM'), 'org_id': this.state.org_id, 'social_worker_id': this.state.social_worker_id });
        })();
    }

    /**
     * 查询方法
     */
    private select_func = (condition: {}) => {
        request(this, AppServiceUtility.report_management.get_service_provider_record_settlement!(condition, this.state.current_page, this.state.pageSize))!
            .then((res: any) => {
                this.setState({
                    dataSource: res.result,
                    total_data: res.total
                });
            });
    }
    /** 树形选择框改变事件 */
    onChangeTree = (value: any) => {
        this.setState({
            org_id: value
        });
        let condition = { 'month': this.state.query_month, 'org_id': value };
        if (this.state.social_worker_id) {
            condition['social_worker_id'] = this.state.social_worker_id;
        }
        this.select_func(condition);
    }
    /** 社工局下拉框改变事件 */
    onChangeSelect = (value: any) => {
        this.setState({
            social_worker_id: value
        });
        let condition = { 'month': this.state.query_month, 'social_worker_id': value };
        if (this.state.org_id) {
            condition['org_id'] = this.state.org_id;
        }
        this.select_func(condition);
    }
    /** 日期范围回调 */
    time_change = (date: any, dateString: string) => {
        this.setState({
            query_month: dateString
        });
        let condition = { 'month': dateString };
        if (this.state.org_id) {
            condition['org_id'] = this.state.org_id;
        }
        if (this.state.social_worker_id) {
            condition['social_worker_id'] = this.state.social_worker_id;
        }
        this.select_func(condition);
    }
    /** 分页改变回调事件 */
    pageOnClick = (page: any, pageSize: any) => {
        this.setState({
            current_page: page
        });
        let condition = { 'month': this.state.query_month };
        if (this.state.org_id) {
            condition['org_id'] = this.state.org_id;
        }
        if (this.state.social_worker_id) {
            condition['social_worker_id'] = this.state.social_worker_id;
        }
        this.select_func(condition);
    }
    /** 改变分页数量回调事件 */
    onShowSizeChange = (current: number, pageSize: number) => {
        this.setState({
            pageSize: pageSize,
            current_page: current,
            total_pages: Math.ceil((this.state.total_data ? this.state.total_data : 0) / pageSize)
        });
        let condition = { 'month': this.state.query_month };
        if (this.state.org_id) {
            condition['org_id'] = this.state.org_id;
        }
        if (this.state.social_worker_id) {
            condition['social_worker_id'] = this.state.social_worker_id;
        }
        this.select_func(condition);
    }
    render() {
        const { getFieldDecorator } = this.props.form!;
        return (
            <MainContent>
                <LocaleProvider locale={zh_CN}>
                    <MainCard title='服务记录结算' style={{ position: 'relative' }}>
                        <div style={{ overflow: 'hidden', position: 'absolute', top: '13px', right: '25px' }}>
                            <Button type="primary" onClick={this.export} style={{ float: 'right', marginRight: '3px' }}>导出</Button>
                            {/* <Button type="primary" style={{ float: 'right', marginRight: '3px' }}>查询</Button> */}
                            <div style={{ float: 'right', marginRight: '3px' }}>
                                <MonthPicker onChange={this.time_change} defaultValue={moment(moment(), 'YYYY/MM')} format={'YYYY/MM'} />
                            </div>
                            <div style={{ float: 'right', marginRight: '140px' }}>
                                {/* <TreeSelect
                                    showSearch={true}
                                    treeNodeFilterProp={'title'}
                                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                    allowClear={true}
                                    onChange={this.onChangeTree}
                                    treeDefaultExpandAll={true}
                                    treeData={this.state.org_list}
                                    placeholder={"请选择服务商"}
                                    style={{
                                        width: '12em'
                                    }}
                                /> */}
                                <Select
                                    showSearch={true}
                                    allowClear={true}
                                    onChange={this.onChangeTree}
                                    placeholder={"请选择服务商"}
                                    style={{
                                        width: '20em'
                                    }}
                                    value={this.state.org_id}
                                >
                                    {this.state.org_list!.length > 0 ? this.state.org_list!.map((item: any) => <Option key={item.id} value={item.id}>{item.name}</Option>) : null}
                                </Select>
                            </div>
                            <div style={{ float: 'right', marginRight: '140px' }}>
                                <Select
                                    showSearch={true}
                                    allowClear={true}
                                    onChange={this.onChangeSelect}
                                    placeholder={"请选择社工局"}
                                    style={{
                                        width: '16em'
                                    }}
                                    value={this.state.social_worker_id}
                                >
                                    {this.state.social_worker_list!.length > 0 ? this.state.social_worker_list!.map((item: any) => <Option key={item.id} value={item.id}>{item.name}</Option>) : null}
                                </Select>
                            </div>
                        </div>
                        <Table
                            columns={columns}
                            dataSource={this.state.dataSource}
                            pagination={{
                                showQuickJumper: true,
                                showSizeChanger: true,
                                onShowSizeChange: this.onShowSizeChange,
                                onChange: this.pageOnClick,
                                defaultPageSize: this.state.pageSize,
                                current: this.state.current_page,
                                total: this.state.total_data
                            }}
                            bordered={true}
                            size="middle"
                        />
                    </MainCard>
                    <Modal
                        title="请选择导出类型"
                        visible={this.state.show}
                        onOk={() => this.download()}
                        onCancel={() => this.onCancel({ show: !this.state.show })}
                        okText="下载"
                        cancelText="取消"
                    >
                        <MainCard>
                            <Form>
                                <Form.Item>
                                    {getFieldDecorator('isAll', {
                                        initialValue: ''
                                    })(
                                        <Radio.Group onChange={(e: any) => { this.onChangeRadio(e.target.value); }}>
                                            <Radio key={1} value={1}>导出数据</Radio>
                                        </Radio.Group>
                                    )}
                                </Form.Item>
                            </Form>
                        </MainCard >
                    </Modal>
                </LocaleProvider>
            </MainContent>
        );
    }
}

/**
 * 控件：服务记录结算组件控制器
 * @description 服务记录结算组件
 * @author
 */
@addon('serviceRecordSettlementView', '服务记录结算组件', '服务记录结算组件')
@reactControl(Form.create<any>()(serviceRecordSettlementView), true)
export class serviceRecordSettlementViewControl extends ReactViewControl {
}